<template>
<div>
    <my-header></my-header>
  <div class="home">
    <div class="cphead">
      <div class="cpheadcontent">
        <div class="cpinfo">
          <span class="title">{{ list[0].name }}</span>
          <span class="content">
            <a
              href="#"
              v-for="(items, i) in list[0].detail"
              :key="i"
              @click="getcitylist(items, i, $event)"
              :class="active === items ? 'selected' : ''"
              >{{ items }}</a
            >
          </span>
          <span class="title">{{ list[1].name }}</span>
          <span class="content">
            <a
              href="#"
              v-for="(items, i) in list[1].detail"
              :key="i"
              @click="getprojectlist(items, $event)"
              :class="active1 === items ? 'selected' : ''"
              >{{ items }}</a
            >
          </span>
          <span class="title">{{ list[2].name }}</span>
          <span class="content">
            <a
              href="#"
              v-for="(items, i) in list[2].detail"
              :key="i"
              @click="getfinancelist(items, $event)"
              :class="active2 === items ? 'selected' : ''"
              >{{ items }}</a
            >
          </span>
          <span class="title">{{ list[3].name }}</span>
          <span class="content">
            <a
              href="#"
              v-for="(items, i) in list[3].detail"
              :key="i"
              @click="getstagelist(items, $event)"
              :class="active3 === items ? 'selected' : ''"
              >{{ items }}</a
            >
          </span>
        </div>
      </div>
    </div>
    <div class="expect">
      <div class="company-count">
        共
        <span>10+</span>公司
      </div>
      <a href="#" class="checkbox">
        <input type="checkbox" value="0" />
        <span>根据简历精准匹配</span>
      </a>
    </div>
    <div class="cpmain">
      <ul>
        <li
          v-for="(val, i) in gongsi"
          :key="i"
          @click="getcompanydetail(val.id, val.title)"
        >
          <div class="sub-li">
            <a class="company-info">
              <img :src="val.src" alt />
              <div class="company-text">
                <h4>{{ val.name }}</h4>
                <p>
                  {{ val.stage }}
                  <span class="vline"></span>{{ val.kind }}
                </p>
              </div>
            </a>
            <a class="about-info">
              <p>
                热招
                <u class="h">{{ val.job }}</u> {{ val.price }}
              </p>
            </a>
          </div>
        </li>
      </ul>
    </div>
    <div class="page" v-if="show">
      <el-pagination
        :page-size="10"
        background
        layout="prev, pager, next"
        @current-change="changepage"
        :total="count"
      >
      </el-pagination>
    </div>
    <div class="company-links-container cphead">
      <div class="pos-bread" style="font-size: 12px">
        <router-link to="/">首页</router-link>&nbsp;&gt;
        <a href="#">公司大全</a>&nbsp;&gt; <a href="#">{{ active }}</a
        >&nbsp;&gt;
        <a href="#">{{ active1 }}</a>
      </div>
      <div class="links-container">
        <div class="links-box cpheadcontent">
          <div class="title-box">
            <span
              class="title-item"
              v-for="(val, i) in hotlist"
              :key="i"
              @click="getlistdown(i)"
              :class="val.active ? 'cur' : ''"
              >{{ val.title }}</span
            >
          </div>

          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
    <my-footer></my-footer>
</div>
</template>

<script>
import myheader from '@/components/header.vue'
import myfooter from '@/components/footer.vue'
import { getCompanylist, getCompanykind, getCompany, getcylist } from "@/api";
export default {
  name: "homePage",
  data() {
    return {
      list: [],
      gongsi: [],
      active: "全国",
      active1: "不限",
      active2: "不限",
      active3: "不限",
      count: 0,
      oldarr: [],
      oldarr1: [],
      oldarr2: [],
      oldarr3: [],
      show: true,
      newarr: [],
      flag: false,
      flag1: false,
      flag2: false,
      hotlist: [],
    };
  },
  components: {
    'my-header': myheader,
    'my-footer': myfooter
  },
  created() {
    getCompany().then((res) => {
      console.log(res);
    });
    getCompanylist().then((res) => {
      this.oldarr = res;
      let res1 = [];
      for (var i = 0; i < res.length; i++) {
        res1[i] = res[i];
      }
      this.count = res1.length;
      this.gongsi = res1.splice(0, 10);
      this.newarr = this.gongsi;
    });
    getCompanykind().then((res) => {
      this.list = res;
    });
    getcylist().then((res) => {
      console.log(res);
      this.hotlist = res;
      this.hotlist.forEach((val) => {
        val.active = false;
        if (val.herf.includes(this.$route.params.id)) {
          val.active = true;
        }
      });
    });
    this.$router
      .push({
        name: "hot",
        params: {
          id: "01",
        },
      })
      .catch((res) => {});
  },
  mounted() {
    // this.$router
    //   .push({
    //     name: "hot",
    //     params: {
    //       id: "01",
    //     },
    //   })
    //   .catch((res) => {});
  },
  methods: {
    getlistdown(i) {
      this.$router.push(this.hotlist[i].herf).catch((res) => {});

      this.hotlist.forEach((val) => {
        val.active = false;
      });
      this.hotlist[i].active = true;
    },

    getcompanydetail(i, title) {
      // console.log(i)
      this.$router
        .push({
          name: "companydetail",
          params: {
            id: i,
            title,
          },
        })
        .catch((err) => {});
    },
    getcitylist(items, i, event) {
      this.flag = true;
      (this.flag1 = false),
        (this.flag2 = false),
        (this.active2 = this.active3 = this.active1 = "不限");
      if (event.target.innerText === items) {
        this.show = false;
        this.active = items;
        var val = this.list[0].detail[0];
        this.list[0].detail[0] = event.target.innerText;
        this.list[0].detail[i] = val;
        if (val === "全国") {
          this.list[0].detail.splice(i, 1);
          this.list[0].detail.splice(1, 0, "全国");
        }
        this.gongsi = this.oldarr;
        const arr = this.gongsi.filter((val) => {
          return val.city === items;
        });
        this.gongsi = arr;
        this.oldarr1 = arr;
      }
      if (event.target.innerText === "全国") {
        this.show = true;
        this.gongsi = this.newarr;
        this.oldarr1 = this.oldarr;
        // console.log(this.oldarr);
      }
    },
    getprojectlist(items, event) {
      this.flag1 = true;
      if (!this.flag) {
        this.oldarr1 = this.oldarr;
      }
      this.active2 = this.active3 = "不限";
      this.show = false;
      if (event.target.innerText === items) {
        this.active1 = items;
        this.gongsi = this.oldarr1;
        const arr = this.gongsi.filter((val) => {
          return val.kind === items;
        });
        this.gongsi = arr;
        this.oldarr2 = arr;
      }
      if (event.target.innerText === "不限") {
        this.gongsi = this.oldarr1;
        this.oldarr2 = this.oldarr1;
      }
      if (
        this.active1 === "不限" &&
        this.active === "全国" &&
        this.active2 === "不限" &&
        this.active3 === "不限"
      ) {
        this.gongsi = this.newarr;
        this.show = true;
      }
    },
    getfinancelist(items, event) {
      this.flag2 = true;
      if (!this.flag1 && !this.flag) {
        this.oldarr2 = this.oldarr;
      } else if (this.flag) {
        this.oldarr2 = this.oldarr1;
      }
      this.active3 = "不限";
      this.show = false;
      if (event.target.innerText === items) {
        this.active2 = items;
        this.gongsi = this.oldarr2;
        const arr = this.gongsi.filter((val) => {
          return val.stage === items;
        });
        this.gongsi = arr;
        this.oldarr3 = arr;
      }
      if (event.target.innerText === "不限") {
        this.gongsi = this.oldarr2;
        this.oldarr3 = this.oldarr2;
      }
      if (
        this.active1 === "不限" &&
        this.active === "全国" &&
        this.active2 === "不限" &&
        this.active3 === "不限"
      ) {
        this.gongsi = this.newarr;
        this.show = true;
      }
    },
    getstagelist(items, event) {
      if (!this.flag2 && !this.flag1 && !this.flag) {
        this.oldarr3 = this.oldarr;
      } else if (this.flag1) {
        this.oldarr3 = this.oldarr2;
      } else if (this.flag) {
        this.oldarr3 = this.oldarr1;
      }
      this.show = false;
      if (event.target.innerText === items) {
        this.active3 = items;
        this.gongsi = this.oldarr3;
        const arr = this.gongsi.filter((val) => {
          return val.people === items;
        });
        this.gongsi = arr;
      }
      if (event.target.innerText === "不限") {
        this.gongsi = this.oldarr3;
      }
      if (
        this.active1 === "不限" &&
        this.active === "全国" &&
        this.active2 === "不限" &&
        this.active3 === "不限"
      ) {
        this.gongsi = this.newarr;
        this.show = true;
      }
    },
    changepage(i) {
      getCompanylist().then((res) => {
        res = res.splice(10 * (i - 1), 10);
        this.gongsi = res;
      });
    },
  },
};
</script>
<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
}
.home {
  background: #f6f6f8;
  min-width: 1184px;
  line-height: 26px;
  color: #414a60;
  font-size: 14px;
  .company-links-container {
    .pos-bread {
      margin: auto;
      width: 1184px;
      padding-top: 4px;
      padding-bottom: 10px;
      color: #9fa3b0;
      a {
        color: #9fa3b0;
        vertical-align: middle;
        text-decoration: none;
      }
    }
    .links-container {
      background: #fff;
      border-top: 1px solid #f4f4f6;
      padding-bottom: 20px;
      position: relative;
      margin-top: 12px;
      .links-box {
        margin: 0 auto;
        padding-top: 20px;
        width: 1184px;
        .title-box {
          font-size: 0;
          .title-item {
            color: #8d92a1;
            font-size: 14px;
            margin-right: 240px;
            display: inline-block;
            height: 32px;
            cursor: pointer;
            position: relative;
          }
          .cur {
            color: #18c3b1;
            border-bottom: 3px #62d5c8 solid;
          }
        }
        .links-wrapper {
          padding-top: 22px;
          .links-content {
            display: none;
            font-size: 0;
            overflow: hidden;
            a {
              font-size: 12px;
              color: #8d92a1;
              margin: 0 30px 0 0;
              line-height: 35px;
              display: inline-block;
              text-decoration: none;
              color: #414a60;
              background: red;
            }
          }
          .links-content.cur {
            display: block;
          }
          .links-content.limited {
            max-height: 145px;
          }
        }
      }
    }
  }
  li,
  ol,
  ul {
    list-style: none;
  }
  .cphead {
    background-color: #fff;
    line-height: 25px;
    .cpheadcontent {
      padding: 30px 0;
      width: 1184px;
      margin: 0 auto;
      .cpinfo {
        .title {
          float: left;
          width: 70px;
          color: #414a60;
          font-size: 14px;
          font-weight: 500;
          color: #414a60;
        }
        .content {
          display: block;
          overflow: hidden;
          margin-left: 70px;
          font-size: 13px;
          margin-bottom: 13px;
          a {
            display: inline-block;
            margin-right: 6px;
            padding: 0 8px;
            color: #61687c;
          }
          .selected {
            color: #00c2b3;
          }
        }
      }
    }
  }
  .expect {
    width: 1184px;
    margin: 27px auto;
    padding: 0;
    font-size: 14px;
    line-height: 26px;
    .company-count {
      float: right;
      color: #61687c;
      padding-top: 2px;
    }
    span {
      padding: 0 4px;
      color: #00c2b3;
    }
    .checkbox input[type="checkbox"] ~ span {
      display: inline-block;
      cursor: pointer;
      position: relative;
      min-height: 18px;
      padding-left: 24px;
    }
  }
  .cpmain {
    width: 1184px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      height: auto;
      overflow: hidden;
      width: 110%;
      li {
        height: 140px;
        width: 284px;
        float: left;
        margin: 0 16px 16px 0;
        background: #fff;
        .sub-li {
          display: block;
          height: 140px;
          width: 284px;
          .about-info {
            color: #8d92a1;
            height: 42px;
            line-height: 42px;
            font-size: 12px;
            .h {
              color: #00c2b3;
              text-decoration: none;
              display: inline-block;
              vertical-align: top;
              max-width: 145px;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            p {
              width: 240px;
              margin: 0 auto;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          a {
            color: #414a60;
            display: block;
          }
          .company-info {
            height: 77px;
            margin: 0 20px;
            padding-top: 20px;
            border-bottom: dashed 1px #ededed;
            img {
              height: 55px;
              width: 55px;
              float: left;
              border-radius: 10px;
              border: solid 1px #f2f5fa;
            }
            .company-text {
              margin-left: 65px;
              text-align: right;
              overflow: hidden;
              text-overflow: ellipsis;

              h4 {
                height: 25px;
                line-height: 25px;
                font-size: 16px;
                font-weight: 400;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                &:hover {
                  color: #5dd5c8;
                }
              }
              p {
                height: 40px;
                line-height: 41px;
                color: #898e9d;
                font-size: 12px;
                display: inline-block;
                white-space: nowrap;
                .vline {
                  display: inline-block;
                  width: 1px;
                  height: 12px;
                  vertical-align: middle;
                  background: #e0e0e0;
                  margin: 0 10px;
                }
              }
            }
          }
        }
      }
    }
  }
  .page {
    background-color: #fff;
    text-align: center;
    padding: 12px 0;
    width: 1184px;
    margin: 0 auto 20px;
    .el-pagination {
      padding: 0;
    }
  }
}
</style>